<template>
	<view class="map_container">
		<map class="map" :latitude="latitude" :longitude="longitude" :scale="16" :markers="markers" show-location></map>
		<!-- <image src="../../static/icon/sign.png" mode=""></image> -->
		<view class="data">
			位置信息position:{{position}}
			errorMessage:{{errorMessage}}
		</view>
	</view>
</template>
<script setup>
	import { onMounted, ref } from 'vue'
	const latitude = ref(28.649785)
	const longitude = ref(115.787725)
	// 115.787725,28.649785
	const data = ref({})
	const markers = ref([{
		id: 1,
		latitude: 0,
		longitude: 0,
		iconPath: '../../static/icon/sign.png',
	}])
	const position = ref(null)
	onMounted(() => {
		getLocation()
	})

	// function getLocation() {
	// 	uni.getLocation({
	// 		type: 'gcj02',
	// 		isHighAccuracy: true,
	// 		geocode: true,
	// 		success(res) {
	// 			console.log('位置信息', res)
	// 			data.value = res
	// 			latitude.value = res.latitude
	// 			longitude.value = res.longitude
	// 			// 将 markers 的经纬度赋值为获取到的位置信息
	// 			markers.value[0].latitude = res.latitude;
	// 			markers.value[0].longitude = res.longitude;
	// 			// markers.value[0].latitude = 28.649785;
	// 			// markers.value[0].longitude = 115.787725;
	// 		},
	// 		fail(err) {
	// 			console.log("err-----",err);
	// 			alert(err)
	// 		}
	// 	})
	// }
	
	// 获取位置信息的方法
	const getLocation = () => {
	  if (navigator.geolocation) {
	    navigator.geolocation.getCurrentPosition(
	      (pos) => {
	        position.value = pos;
	        errorMessage.value = '';
	      },
	      (error) => {
	        errorMessage.value = `获取位置失败: ${error.message}`;
	        position.value = null;
	      }
	    );
	  } else {
	    errorMessage.value = '您的浏览器不支持地理定位功能。';
		position.value = 'error';
	  }
	};
</script>

<style lang="scss" scoped>
	.map_container {
		height: 100vh;
		width: 100vw;

		.map {
			width: 100%;
			height: 80%;
		}
		
	}
</style>